<template>
	<div class="warningInfo-alert-main">
		<div class="warningInfo-label">
			{{ title }}
		</div>
		<div class="warningInfo-alert-list">
			<div class="warningInfo-alert-list-header">
				<div>{{ header[0] }}</div>
				<div>{{ header[1] }}</div>
				<div>{{ header[2] }}</div>
			</div>
			<div v-if="data.length>0" ref="scrollAlert" class="warningInfo-alert-list-main scroll-content">
				<div v-for="(item, index) in data" :key="index" class="warningInfo-alert-list-item">
					<div>{{ item.machineCode }}</div>
					<div>{{ item.productName }}</div>
					<div>{{ item.yarnCount }}</div>
				</div>
			</div>
			<el-empty v-else :image-size="80"></el-empty>
		</div>
	</div>
</template>
<script>
    export default {
        props: {
            data: {
                type: Array,
                default: () => []
            }
        },
        data() {
            return {
                header: ['设备', '设备品种', '设备支数'],
                title: '设备支数异常提醒'
            };
        },
        methods: {
            runScroll() {
                clearInterval(this.timer);
                this.timer = setInterval(() => {
                    const scrollContainer = this.$refs.scrollAlert;
                    if (scrollContainer) { // 确保 scrollContainer 存在
                        if (scrollContainer.scrollHeight > scrollContainer.clientHeight) {
                            if (scrollContainer.scrollTop + scrollContainer.clientHeight >= scrollContainer.scrollHeight) {
                                scrollContainer.scrollTop = 0; // 回到顶部
                            } else {
                                scrollContainer.scrollTop += 1; // 每次移动1px
                            }
                        }
                    }
                }, 60);
            }
        },
        mounted() {
            this.runScroll();
        },
        beforeDestroy() {
            clearInterval(this.timer); // 组件销毁前清除定时器
        }

    };
</script>
<style lang="scss" scoped>
@import "../index";

.el-empty {
    height: 100%;
}
</style>
